import React from 'react';
import { Descriptions } from 'antd';
import { ProductDetails as ProductDetailsInterface } from "./index";


const ProductDetails: React.FC<{ productDetails: ProductDetailsInterface }> = ({ productDetails }) => {
  console.log(productDetails, '检查这里是什么')
  const items = [ 
    { key: '1', label: '商品名称', children: productDetails.name },
    { key: '2', label: '图片链接', children: productDetails.imgUrl },
    { key: '3', label: '描述信息', children: productDetails.describes },  
    { key: '4', label: '商品类别', children: productDetails.type },
    { key: '5', label: '服务保障', children: typeof productDetails.server === 'string' ? productDetails.server : JSON.stringify(productDetails.server) },
    { key: '6', label: '详情', children: productDetails.details },
  ]

  const priceTypeListItems = productDetails.priceTypeList.map((priceType, index) => ({
    key: `priceType_${index}`,
    label: `价格类型 ${priceType.priceType}`,
    children: `积分: ${priceType.score.toFixed(2)}, 现金: ${priceType.money.toFixed(2)}`
  }));
  items.push(...priceTypeListItems);

  //图片资源
  const images = [
    <img alt="Product" src={productDetails.imgUrl} />,

  ]
  const items1 = [
    { key: '1', label: '发货地址', children: productDetails.sendAddress },
    { key: '2', label: '不发货地址', children: productDetails.unsendAddress },
    
  ];
  const items2 = [
    { key: '1', label: '供应商', children: productDetails.supplier },
    { key: '2', label: '供应商联系方式', children: typeof productDetails.phoneNumber === 'number' ? productDetails.phoneNumber.toString() : productDetails.phoneNumber },
    
  ];
  return (<div> <Descriptions title="基础信息" items={items} />

    <Descriptions title="商品图片" />
    {images.map((image, index) => (
      <img key={index} src={productDetails.imgUrl} alt={`Image ${index + 1}`} />
    ))}

    <Descriptions title="投放城市" items={items1} />

    <Descriptions title="供应商信息" items={items2} />

  </div>



  );
};

export default ProductDetails;